/*
选择器 只是列举一些我比较容易忘记的


1.属性选择器

//针对所有具有title属性的a元素
a[title]{
}

2.值选择器
//针对所有具有 href 属性并且值为 http://www.baidu.com 的a元素
a[href="http://www.baidu.com"]{
}

3. 为多个元素应用样式
a,p,span{

}

4.上下文选择器
//选中div中的所有span元素
div span{
    color: #49d1ff;
}
5.父子选择器
div > span{
    color: #0000ff;
}

*/

/*这里定义了两个类名,必须给元素设置两个类型才能生效;这样做的目的是优先级更高*/
.test0.test1{
    color: #ffc444;
    font-weight: bold;
    width: 6em;
    height: 4em;
    border: 1px dashed #ff55c9;
}
.test2{
    color: #ff8863;
}

/*上下文选择器 选中div中的所有span元素 */
div span{
    color: #49d1ff;
}
/*父子选择器；只选中div中子元素,不会选中子子元素等; */
div > span{
    color: #0000ff;
}

.testsibling{
    font-size: 14px;
}
/*
设置相邻同胞元素选择器
*/
.testsibling h1+p{
    color: #ff0000;
}

/*
设置同胞元素选择器,只要是同胞就会生效
*/
.testsibling h1~h2{
    color: #7e77ff;
}

ul{
    list-style: none;
    padding:0;
}

/*添加伪类选中第一个li和最后一个li元素*/

li:first-child{
    color: #f00;
}

li:last-child{
    color: #00f;
}

.testfirstclass{
    width:15em;
    border:1px solid #ccc;
    padding: 0px 5px 0px 5px;
}
/* 伪元素只有四个 first-letter first-line before after */
/*选中第一个字*/
.testfirstclass p::first-letter{
    font-size: 2em;
}
/*选中第一行*/
.testfirstclass p::first-line{
    color: #f00;
}

/*设置链接样式的原则 LVHA */

.testfirstclass a:link{
    color: blue;
}

.testfirstclass a:visited{
    color: #f00;
}

.testfirstclass a:hover{
    color: green;
}
/*可以认为是点击时候的样式 */
.testfirstclass a:active{
    color: #000;
}
/**属性选择器;为所有设置了class属性的p元素应用样式**/
p[class]{
    font-size: 2em;
}